<template>
	<view class="wrap">

		<scroll-view class="scroll-list" scroll-y="true">
			<view class="video">
				<video style="width:100%;" v-show="showVideo" ref="videoPlayer" muted controls autoplay
					:src="selectedResource"></video>
				<video style="width:100%;" v-show="!showVideo" ref="videoPlayer" muted controls autoplay
					:src="selectedResource"></video>
			</view>


			<view class="resource-selector">
				<view v-for="(item, index) in resources" :key="index" class="resource-item"
					:class="{ active: selectedIndex === index }" @click="selectResource(index)">
					{{ item.name }}
				</view>
			</view>

		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showVideo: true,
				dp: {},
				selectedIndex: 0,
				refreshdata: 0,
				selectedResource: "",
				resources: [{
						name: '资源1',
						url: 'http://222.134.15.58:83/openUrl/AYmQ1rO/live.m3u8'
					},
					{
						name: '资源2',
						url: 'http://222.134.15.58:83/openUrl/AYmQ1rO/live.m3u8'
					},
					{
						name: '资源3',
						url: 'http://222.134.15.58:83/openUrl/AYmQ1rO/live.m3u8'
					},
					{
						name: '资源3',
						url: 'http://222.134.15.58:83/openUrl/AYmQ1rO/live.m3u8'
					},
					{
						name: '资源3',
						url: 'http://222.134.15.58:83/openUrl/AYmQ1rO/live.m3u8'
					}
				]
			}
		},

		watch: {
			refreshData(oldValue, newValue) {
				this.$nextTick(() => {
					this.showVideo = true;
				});
			}
		},
		onLoad() {
			this.getVideo()
			setTimeout(() => {
				this.selectResource(this.selectedIndex);
			}, 1000); 
		},
		methods: {
			selectResource(index) {
				this.selectedIndex = index;
				const selectedUrl = this.resources[index].url;
				this.$u.api.getVideoUrl({
						"code": selectedUrl
					})
					.then(res => {
						const videoUrl = res.data.url.replace("10.5.7.149", "222.134.15.58");
						this.selectedResource = videoUrl;
					})
					.catch(error => {s
						console.error("Failed to get video URL:", error);
					});
				this.$nextTick(() => {
					setTimeout(() => {
						this.showVideo = !this.showVideo;
					}, 0);
				});
				setTimeout(() => {
					this.refresh()
				}, 500);

			},
			refresh() {
				this.showVideo = !this.showVideo;
			},
			getVideo() {
				this.$u.api.getVideo({
					"algorithmProcessId": "getVideo",
					"param": {
						"data": {
							organ_uuidfc: uni.getStorageSync('organId')
						}
					}
				}).then(res => {
					this.resources = res.data.data.result.map(item => {
						return {
							name: item.video_name,
							url: item.video_description
						}
					})
				})

			},

		}
	}
</script>
<style scoped lang="scss">
	@import 'style/liveVideo.css';
</style>